'use client'
import { useGSAP } from "@gsap/react"
import { useState } from "react"
import { twMerge } from "tailwind-merge"
import gsap from "gsap"

const Tabs = () => {
  const [activeTab, setActiveTab] = useState(0)

  const handleTabClick = (index: number) => {
    setActiveTab(index)
  }

  useGSAP(() => {
    // 元素进入动画
    gsap.from('.tabs div', {
      opacity: 0,
      y: -20,
      stagger: 0.1,
      duration: 0.5,
      ease: 'power2.out',
      delay: 0.3
    })
  })

  return (
    <div className="tabs flex items-center space-x-[5px] md:space-x-[20px] lg:space-x-[35px] mb-[10px] md:mb-[20px] xl:mb-[43px]">
      <div className={twMerge("w-auto xl:w-[106px] h-auto xl:h-[40px] py-[5px] xl:py-0 px-[7px] xl:px-0 rounded-full text-[#626262] select-none cursor-pointer text-xs lg:text-sm xl:text-[18px] border border-[#E2E2E2] flex items-center justify-center transition-colors", activeTab === 0 && "bg-[#1456A2] text-white")} onClick={() => handleTabClick(0)}>保研资讯</div>
      <div className={twMerge("w-auto xl:w-[106px] h-auto xl:h-[40px] py-[5px] xl:py-0 px-[7px] xl:px-0 rounded-full text-[#626262] select-none cursor-pointer text-xs lg:text-sm xl:text-[18px] border border-[#E2E2E2] flex items-center justify-center transition-colors", activeTab === 1 && "bg-[#1456A2] text-white")} onClick={() => handleTabClick(1)}>保研干货</div>
      <div className={twMerge("w-auto xl:w-[106px] h-auto xl:h-[40px] py-[5px] xl:py-0 px-[7px] xl:px-0 rounded-full text-[#626262] select-none cursor-pointer text-xs lg:text-sm xl:text-[18px] border border-[#E2E2E2] flex items-center justify-center transition-colors", activeTab === 2 && "bg-[#1456A2] text-white")} onClick={() => handleTabClick(2)}>大数据分析</div>
      <div className={twMerge("w-auto xl:w-[106px] h-auto xl:h-[40px] py-[5px] xl:py-0 px-[7px] xl:px-0 rounded-full text-[#626262] select-none cursor-pointer text-xs lg:text-sm xl:text-[18px] border border-[#E2E2E2] flex items-center justify-center transition-colors", activeTab === 3 && "bg-[#1456A2] text-white")} onClick={() => handleTabClick(3)}>保研思享</div>
      <div className={twMerge("w-auto xl:w-[106px] h-auto xl:h-[40px] py-[5px] xl:py-0 px-[7px] xl:px-0 rounded-full text-[#626262] select-none cursor-pointer text-xs lg:text-sm xl:text-[18px] border border-[#E2E2E2] flex items-center justify-center transition-colors", activeTab === 4 && "bg-[#1456A2] text-white")} onClick={() => handleTabClick(4)}>资料下载</div>
    </div>
  )
}

export default Tabs